<script setup>
import {Document, Fold, Location, Setting} from "@element-plus/icons-vue";
import {RouterView} from "vue-router";
import router from "../router/index.js";

function handleAccount(command) {
  switch (command) {
    case "Set":

      break;
    case "Logout":
      router.push({path: '/login'})
      break;
    default:
      break;
  }
}

</script>

<template>
  <div class="layout-container">
    <div class="layout-header">
      <div style="flex-grow: 1;"/>
      <el-dropdown
          @command="handleAccount"
          trigger="click" style="right: 10px" split-button>
        <el-avatar
            style="width: 25px; height: 25px;"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        />
        <div style="width: 10px"/>
        Admin
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="Set">Set</el-dropdown-item>
            <el-dropdown-item command="Logout">Logout</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div class="layout-main">
      <div class="layout-aside">
        <el-menu
            router
            :default-active="this.$route.path"
            class="layout-aside-menu">
          <el-sub-menu index="/manage">
            <template #title>
              <el-icon>
                <location/>
              </el-icon>
              <span>系统管理 </span>
            </template>
            <el-menu-item index="/manage/account">
              <template #title>
                <el-icon>
                  <location/>
                </el-icon>
                <span>账户管理 </span>
              </template>
            </el-menu-item>
            <el-menu-item index="/manage/org">
              <template #title>
                <el-icon>
                  <location/>
                </el-icon>
                <span>机构管理 </span>
              </template>
            </el-menu-item>
            <el-menu-item index="/manage/role">
              <template #title>
                <el-icon>
                  <location/>
                </el-icon>
                <span>角色管理 </span>
              </template>
            </el-menu-item>
            <el-menu-item index="/manage/permission">
              <template #title>
                <el-icon>
                  <location/>
                </el-icon>
                <span>权限管理 </span>
              </template>
            </el-menu-item>
            <el-menu-item index="/manage/view">
              <template #title>
                <el-icon>
                  <location/>
                </el-icon>
                <span>视图管理 </span>
              </template>
            </el-menu-item>
            <el-menu-item index="/manage/dict">
              <template #title>
                <el-icon>
                  <location/>
                </el-icon>
                <span>字典管理 </span>
              </template>
            </el-menu-item>
            <el-menu-item index="/manage/message">
              <template #title>
                <el-icon>
                  <location/>
                </el-icon>
                <span>消息管理 </span>
              </template>
            </el-menu-item>
            <el-menu-item index="/manage/account_message">
              <template #title>
                <el-icon>
                  <location/>
                </el-icon>
                <span>我的消息 </span>
              </template>
            </el-menu-item>
            <el-menu-item index="/manage/audit_log">
              <template #title>
                <el-icon>
                  <location/>
                </el-icon>
                <span>审计日志 </span>
              </template>
            </el-menu-item>
            <el-menu-item index="/manage/parameter">
              <template #title>
                <el-icon>
                  <location/>
                </el-icon>
                <span>系统参数 </span>
              </template>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="/guards">
            <template #title>
              <el-icon>
                <location/>
              </el-icon>
              <span>Guards </span>
            </template>
            <el-menu-item index="/guards/dashboard">
              <template #title>
                <el-icon>
                  <location/>
                </el-icon>
                <span>Dashboard </span>
              </template>
            </el-menu-item>
            <el-menu-item index="/guards/host">
              <template #title>
                <el-icon>
                  <location/>
                </el-icon>
                <span>Host </span>
              </template>
            </el-menu-item>
            <el-menu-item index="/guards/monitor">
              <template #title>
                <el-icon>
                  <location/>
                </el-icon>
                <span>Monitor </span>
              </template>
            </el-menu-item>
            <el-menu-item index="/guards/alarm">
              <template #title>
                <el-icon>
                  <location/>
                </el-icon>
                <span>Alarm </span>
              </template>
            </el-menu-item>
            <el-menu-item index="/guards/item">
              <template #title>
                <el-icon>
                  <location/>
                </el-icon>
                <span>Target </span>
              </template>
            </el-menu-item>
          </el-sub-menu>

          <el-menu-item index="2">
            <el-icon>
              <icon-menu/>
            </el-icon>
            <span>Navigator </span>
          </el-menu-item>
          <el-menu-item index="3">
            <el-icon>
              <document/>
            </el-icon>
            <span>Navigator </span>
          </el-menu-item>
          <el-menu-item index="4">
            <el-icon>
              <setting/>
            </el-icon>
            <span>Navigator Four</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="layout-content">
        <RouterView />
      </div>
    </div>
  </div>
</template>

<style>
.layout-container {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.layout-header {
  display: flex;
  align-items: center;
  height: 60px;
  border-bottom: #5cadff 1px solid;
}

.layout-main {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  height: calc(100% - 61px);
  overflow: hidden;
}

.layout-aside {
  flex: none;
}

.layout-aside-menu {
  width: 240px;
  max-width: 240px;
  height: 100%;
  overflow-y: auto;
}

.layout-content {
  flex: auto;
  margin-left: 10px;
  margin-right: 10px;
  height: 100%;
  overflow: hidden;
}
</style>